<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像局部区域视觉相似度判断</title>
    <style>
        .container img {
            display: block;
            width: 300px; height: 400px;
            user-select: none;
        }
        .container {
            width: 300px;
            position: relative;
        }
        .cover {
            position: absolute;
            left: 20px; right: 20px; top: 0;
            height: 100px;
            border: 2px solid yellow;
            cursor: move;
        }
    </style>
</head>
<body>
    <div class="container">
        <i id="cover" class="cover"></i>
        <img id="img" src="./01.jpg">
    </div>
    <p id="result"></p>
    <script src="color-thief.js"></script>
    <script src="./image-similarity.js"></script>
    <script>
        let getSimilarity = function () {
            // 剪裁范围
            // 注意，需要相对于原始图片尺寸
            // 这里图片1/2缩放显示，因此需要乘以2
            let bounding = [20, parseFloat(getComputedStyle(cover).top) + 2, 300 - 40, 100].map(v => v * 2);

            // 获得此时的范围颜色相似度
            imageSimilarity(img.src, bounding).then(similarity => {
                // 0 极度相似
                // 1 相似
                // 2 不太相似
                // 3 不相似
                // 4 差异较大
                if (similarity === 0) {
                    result.innerHTML = '视觉色彩极度相似';
                } else if (similarity === 1) {
                    result.innerHTML = '视觉色彩相似';
                } else if (similarity === 2) {
                    result.innerHTML = '视觉色彩不太相似';
                } else if (similarity === 3) {
                    result.innerHTML = '视觉色彩不相似';
                } else {
                    result.innerHTML = '视觉色彩差异较大';
                }
            });
        };

        let store = {};
        cover.addEventListener('mousedown', (event) => {
            store.y = event.pageY;
            store.isMoving = true;
            store.top = parseFloat(getComputedStyle(cover).top) || 0;
        });
        document.addEventListener('mousemove', event => {
            if (store.isMoving) {
                event.preventDefault();

                let distanceY = event.pageY - store.y;
                let top = store.top + distanceY;

                if (top < 0) {
                    top = 0;
                } else if (top + cover.offsetHeight > cover.parentElement.clientHeight) {
                    top = cover.parentElement.clientHeight - cover.offsetHeight;
                }

                cover.style.top = top + 'px';
            }
        });
        document.addEventListener('mouseup', function () {
            if (store.isMoving) {
                store.isMoving = false;

                getSimilarity();
            }            
        });

        // 默认进来先判断一次相似度
        getSimilarity();

        img.onclick = function () {
            this.src = /01/.test(this.src) ? '02.jpg' : '01.jpg';

            getSimilarity();
        };
    </script>
</body>
</html>